<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
	<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/themes/icon.css"/>
	<!--<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/demo/demo.css"/> -->
    <script type="text/javascript" src="../jquery-easyui-1.5.3/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.3/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
	    var contextPath = function() {
	        return  "/" + location.pathname.split("/")[1];
	    }
	    
		function getValue(name){
			var str=window.location.search;
			if (str.indexOf(name)!=-1){
				var pos_start=str.indexOf(name)+name.length+1;
				var pos_end=str.indexOf("&",pos_start);
				if (pos_end==-1){
					return str.substring(pos_start);
				} else {
					return str.substring(pos_start,pos_end);
				}
			} else {
				return "";
			}
		}
		
		var  themeName = getValue("theme");
		if (themeName!=""){
		    var cssurl  = $('#easyuiTheme').attr('href');  
		    var href = cssurl.substring(0, cssurl.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';  
		    $('#easyuiTheme').attr('href', href);  
		}
	    
	    //将表单数据转为json
	    function form2Json(id) {
	        var arr = $("#" + id).serializeArray();
	        var jsonStr = "";
	        jsonStr += '{';
	        for (var i = 0; i < arr.length; i++) {
	            jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",'
	        }
	        jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
	        jsonStr += '}';
	        var json = JSON.parse(jsonStr);
	        return json;
	    }
	    
	    //将表单数据转为json格式的字符串，当然也可以JSON.stringify(data)
 		function form2JsonStr(id) {
	        var arr = $("#" + id).serializeArray();
	        var jsonStr = "";
	        jsonStr += '{';
	        for (var i = 0; i < arr.length; i++) {
	            if ( arr[i].value != '' ) {
	            	jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",'	            	
	            }
	        }
	        if (jsonStr.length > 1) {
	        	jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
	        }
	        jsonStr += '}';
	        return jsonStr;
	    }
	</script>

</head>

<style>
    .datagrid-btable{
        width:100%;
    }
    .datagrid-header-inner{
        width:100%;
    }
    .datagrid-header{
        width:100%;
    }
    .datagrid-htable{
        width:100%;
    }
    .datagrid-cell{margin:auto;}
    .fitem{text-align:center}
    .ftitle{text-align:center}
</style>

<body>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'center',title:''">	  
        <div id="dgtoolbar">	
        	<form id="searchform" name="searchform" method="post" action="">	
				<td width="70" height="30">	
					<strong>&nbsp;&nbsp;统计：</strong>
					<select id="count_type" class="easyui-combobox" name="count" editable="false">
				    	<option value="1" selected="selected">线上成交量</option>
				    	<option value="2">回销量</option>
				    	<option value="3">送单成功率</option>
				    	<option value="4">送单时效</option>
					</select>	
				</td>
				<td width="70" height="30">
					<strong>&nbsp;&nbsp;接件日期：</strong>
					<input id="search_intro_time1" name="introTimeBegin" class="easyui-datebox" editable="fasle" style="width:90px"></input>					
					<strong>-</strong>
					<input id="search_intro_time2" name="introTimeEnd" class="easyui-datebox" editable="fasle" style="width:90px"></input>
				</td>		
				<td width="70" height="30">
					<strong>&nbsp;&nbsp;项目：</strong>
				    <select id="search_project" class="easyui-combobox" name="project" editable="false">
				    	<option value="" selected="selected">全部</option>
				    	<option value="上海交行">上海交行</option>
				    	<option value="湖北交行">湖北交行</option>
				    	<option value="兴业">兴业</option>
				    	<option value="广发">广发</option>
				    	<option value="上海招行">上海招行</option>
				    	<option value="四川招行">四川招行</option>
				    	<option value="四川民生">四川民生</option>
				    	<option value="东莞">东莞</option>
				    	<option value="山东">山东</option>
				    	<option value="辽宁">辽宁</option>
				    	<option value="中信">中信</option>
				    </select>	    			
				</td>
				<td width="70" height="30">
					<strong>&nbsp;&nbsp;地区：</strong>
				    <select id="search_area" class="easyui-combobox" name="area" editable="false">
				    	<option value="" selected="selected">全部</option>
				    	<option value="南宁">南宁</option>
				    	<option value="崇左">崇左</option>
				    	<option value="柳州">柳州</option>
				    	<option value="桂林">桂林</option>
				    	<option value="玉林">玉林</option>
				    	<option value="百色">百色</option>
				    	<option value="梧州">梧州</option>
				    	<option value="贺州">贺州</option>
				    	<option value="北海">北海</option>
				    	<option value="贵港">贵港</option>
				    	<option value="钦州">钦州</option>
				    	<option value="防城">防城港</option>
				    </select>	    			
				</td>	
				<td width="70" height="30">
					<strong>&nbsp;&nbsp;类型：</strong>
				    <select id="search_policy_type" class="easyui-combobox" name="policy_type" editable="false">
				    	<option value="">全部</option>
				    	<option value="纸质保单" selected="selected">纸质保单</option>
				    	<option value="电子保单">电子保单</option>
				    </select>	    			
				</td>		
			</form>	 	          
        </div>
        <div class="easyui-panel" style="padding:2px;">
			<div id="id_panel_receiptrate" class="easyui-panel" title="柱状图形展示区" style="height:500px;padding:10px;"
					data-options="iconCls:'icon-sum',collapsible:true,maximizable:true,closable:true">				
       			<div id="id_container_receiptrate" style="height: 100%"></div>
			</div>
		</div>
    </div>
</div>
</body>



<script type="text/javascript" src="../resources/echarts/echarts.min.js"></script>
       
<script type="text/javascript">
	
	var data ;
	var count_type ;
	
    $(function() { 	  
    	
    	//设置统计项目，无需链接后台统计数据
    	count_type = $('#count_type').combobox('getValue');
    	$('#count_type').combobox({
    		onChange: function (newVal,oldVal) {
    	    	count_type = $('#count_type').combobox('getValue');
                drawChart(data);
	        }
        });    	
    	//设置搜索栏的控件，只要变换了选择项，就重新链接后台统计数据
    	$('#search_project').combobox({
    		onChange: function (newVal,oldVal) {
            	getData();
	        }
        });
    	$('#search_area').combobox({
    		onChange: function (newVal,oldVal) {
            	getData();
	        }
        });
    	$('#search_policy_type').combobox({
    		onChange: function (newVal,oldVal) {
            	getData();
	        }
        });
    	
    	
		//设置两个时间选择窗只能选到月份
		//设置起始时间
		$('#search_intro_time1').datebox({
       		//显示日趋选择对象后再触发弹出月份层的事件，初始化时没有生成月份层
       		onShowPanel: function () {
          		//触发click事件弹出月份层
          		span1.trigger('click'); 
          		if (!tds1) {
            		//延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔
            		setTimeout(function() { 
                		tds1 = $('#search_intro_time1').datebox('panel').find('div.calendar-menu-month-inner td');
                		tds1.click(function(e) {
                   			//禁止冒泡执行easyui给月份绑定的事件
                   			e.stopPropagation(); 
                   			//得到年份
                   			var year = /\d{4}/.exec(span1.html())[0] ,
                   			//月份
                   			//之前是这样的month = parseInt($(this).attr('abbr'), 10) + 1; 
                   			month = parseInt($(this).attr('abbr'), 10);  
         					//隐藏日期对象     设置日期的值                
         					$('#search_intro_time1').datebox('hidePanel').datebox('setValue', year + '-' + month); 
                        });
                    }, 0);
          		}
            },
            //配置parser，返回选择的日期
            parser: function (s) {
                if (!s) return new Date();
                var arr = s.split('-');
                return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);
            },
            //配置formatter，只返回年月 之前是这样的d.getFullYear() + '-' +(d.getMonth()); 
            formatter: function (d) { 
                var currentMonth = (d.getMonth()+1);
                var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + '');
                return d.getFullYear() + '-' + currentMonthStr + '-01'; 
            },
            //配置日期变化的时候 激活重新获取数据的程序
            onChange: function (newVal,oldVal) {
            	getData();
	        }
        });
        //日期选择对象
        //var p = $('#search_intro_time1').datebox('panel');
        //日期选择对象中月份
        tds1 = false; 
        //显示月份层的触发控件
        span1 = $('#search_intro_time1').datebox('panel').find('span.calendar-text'); 
		//设置终止时间
        $('#search_intro_time2').datebox({
       		//显示日趋选择对象后再触发弹出月份层的事件，初始化时没有生成月份层
       		onShowPanel: function () {
          		//触发click事件弹出月份层
          		span2.trigger('click'); 
          		if (!tds2) {
            		//延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔
            		setTimeout(function() { 
                		tds2 = $('#search_intro_time2').datebox('panel').find('div.calendar-menu-month-inner td');
                		tds2.click(function(e) {
                   			//禁止冒泡执行easyui给月份绑定的事件
                   			e.stopPropagation(); 
                   			//得到年份
                   			var year = /\d{4}/.exec(span2.html())[0] ,
                   			//月份
                   			//之前是这样的month = parseInt($(this).attr('abbr'), 10) + 1; 
                   			month = parseInt($(this).attr('abbr'), 10);  
         					//隐藏日期对象     设置日期的值                
         					$('#search_intro_time2').datebox('hidePanel').datebox('setValue', year + '-' + month); 
                        });
                    }, 0);
          		}
            },
            //配置parser，返回选择的日期
            parser: function (s) {
                if (!s) return new Date();
                var arr = s.split('-');
                return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);
            },
            //配置formatter，只返回年月 之前是这样的d.getFullYear() + '-' +(d.getMonth()); 
            formatter: function (d) { 
                var currentMonth = (d.getMonth()+1);
                var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + '');
                return d.getFullYear() + '-' + currentMonthStr + '-' + new Date(d.getFullYear(),currentMonthStr,0).getDate(); 
            },
            //配置日期变化的时候 激活重新获取数据的程序
            onChange: function (newVal,oldVal) {
            	getData();
	        }
        });
        //日期选择对象中月份
        tds2 = false; 
        //显示月份层的触发控件
        span2 = $('#search_intro_time2').datebox('panel').find('span.calendar-text'); 
        
        //初始化设置两个日期控件
        var curr_time = new Date();
        $("#search_intro_time1").datebox("setValue", curr_time.getFullYear()+'-01-01');
        $("#search_intro_time2").datebox("setValue", 
        		curr_time.getFullYear()+'-'
        		+(curr_time.getMonth()+1)+'-'
        		+new Date(curr_time.getFullYear(),(curr_time.getMonth()+1),0).getDate());
		
		//点击搜索
		getData();
    });
    
  	//格式化日期
    function myformatter(date) {
        //获取年份
        var y = date.getFullYear();
        //获取月份
        var m = date.getMonth() + 1;
        return y + '-' + m;
    }
    
  	//获取统计数据
    function getData(){    	
		//保单送达率
		$.ajax({
			type:'POST',
			url:contextPath()+'/mdmis/countByIntroMonth',
		    data:form2JsonStr('searchform'),
		    dataType:'json',
			contentType: 'application/json',
		    beforeSend: function () {
				$.messager.progress({
					title: '提示', 
					msg: '操作进行中，请稍候……', 
					text: '' 
				});
		    },
		    complete: function () {
				$.messager.progress('close');
		    },
		    success:function(result){				
				if (result.success){
					data = result.rows;
	                drawChart(data);
	            } else {
	                $.messager.show({	// show error message
	                    title: 'Error',
	                    msg: result.errMsg
	                });
	            }
			}
		}); 
    }
    
	//生成柱状图
    function drawChart(data){
    	var myChart = echarts.init(document.getElementById("id_container_receiptrate"),'light');//设置为light主题风格
    	//var yMax = 1*100;
    	var yMax = 1;
    	var xAxis_data = [];
    	var policy_count = [];
    	var receipt_count = [];
    	var receipt_rate = [];
    	var timeliness = [];
    	var chart_label = '';
    	var main_data ;
    	var warn_line_data = ''; // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type:'average',name:'平均值'}，type值有  max min average，分为最大，最小，平均值
    	var warn_line_measure = '';
    	for (i in data) {
    		if (data[i].month=='total'){
    	    	switch (count_type) {
	    	        case '1':
	    	        	chart_label = '线上成交量(件)';
	    	        	main_data = policy_count;
	        			warn_line_data = data[i].policy_count/(data.length-1);
	    	        	warn_line_measure='件';
	    	            break;
	    	        case '2':
	    	        	chart_label = '保单回销量(件)';
	    	        	main_data = receipt_count;
	        			warn_line_data = data[i].receipt_count/(data.length-1);
	    	        	warn_line_measure='件';
	    	            break;
	    	        case '3':
	    	        	chart_label = '送单成功率(%)';
	    	        	main_data = receipt_rate;
	        			warn_line_data = data[i].receipt_rate*100;
	    	        	warn_line_measure='%';
	    	        	yMax = 100;
	    	            break;
	    	        case '4':
	    	        	chart_label = '送单时效(自然日)';
	    	        	main_data = timeliness;
	        			warn_line_data = data[i].timeliness;
	    	        	warn_line_measure='天';
	    	        	yMax = 10;
	        	} 
    		} else {
        		xAxis_data.push(data[i].month); 
        		policy_count.push(data[i].policy_count);
        		receipt_rate.push(data[i].receipt_rate*100);  
        		receipt_count.push(data[i].receipt_count); 
        		timeliness.push(data[i].timeliness); 
    		}
    	}
    	var dataShadow = [];
    	for (var i = 0; i < receipt_rate.length; i++) {
    	    dataShadow.push(yMax);
    	}
    	option = {
    	    title: {
    	        text: '',
    	        subtext: '^.^'
    	    },
    	    tooltip : {
    	        trigger: 'axis',
    	        formatter: function(data){
    	        	//alert(JSON.stringify(data));
                    return ('<' + data[1]['name'] + '>'
                    		+'</br>总单量:' + policy_count[data[1]['dataIndex']]
            				+'</br>回销量:' + receipt_count[data[1]['dataIndex']]
            				+'</br>成功率:' + receipt_rate[data[1]['dataIndex']] + '%'
                    		+'</br>时效:' + timeliness[data[1]['dataIndex']] + '天');
            	}
    	    },
    	    toolbox: {
    	        show : true,
    	        feature : {
    	            dataView : {show: true, readOnly: false},
    	            magicType : {show: true, type: ['line', 'bar']},
    	            saveAsImage : {show: true}
    	        }
    	    },
    	    calculable : true, //是否启用拖拽重计算特性，默认关闭(即值为false) 
    	    xAxis: {
    	        data: xAxis_data,
    	        axisLabel: {
    	            inside: false, 	//X轴的标签是在柱子内柱子外，如果true就是放在柱子内
    	            textStyle: {
    	                color: '#1C1C1C'
    	            }
    	        },
    	        axisTick: {
    	            show: false
    	        },
    	        axisLine: {
    	            show: false
    	        },
    	        z: 10
    	    },
    	    yAxis: {
    	    	type: 'value',
                name: chart_label,
                nameTextStyle: {
                    color: '#999',
                },
    	        axisLine: {
    	            show: false
    	        },
    	        axisTick: {
    	            show: false
    	        },
    	        axisLabel: {
                    formatter: '{value}' + warn_line_measure,
    	            textStyle: {
    	                color: '#999'
    	            }
    	        }
    	    },
    	    dataZoom: [
    	        {
    	            type: 'inside'
    	        }
    	    ],
    	    series: [
    	        { // For shadow
    	            type: 'bar',
    	            itemStyle: {
    	                normal: {color: 'rgba(0,0,0,0.05)'}
    	            },
    	            barGap:'-100%',
    	            barCategoryGap:'40%',
    	            data: dataShadow,
    	            animation: false
    	        },
    	        {
    	            type: 'bar',
    	            itemStyle: {
    	                normal: {
    	                    color: new echarts.graphic.LinearGradient(
    	                        0, 0, 0, 1,
    	                        [
    	                            {offset: 0, color: '#83bff6'},
    	                            {offset: 0.5, color: '#188df0'},
    	                            {offset: 1, color: '#188df0'}
    	                        ]
    	                    )
    	                },
    	                emphasis: {
    	                    color: new echarts.graphic.LinearGradient(
    	                        0, 0, 0, 1,
    	                        [
    	                            {offset: 0, color: '#2378f7'},
    	                            {offset: 0.7, color: '#2378f7'},
    	                            {offset: 1, color: '#83bff6'}
    	                        ]
    	                    )
    	                }
    	            },
    	            data: main_data,
    	            markLine : {
    	            	label: {
    	                    normal: {
    	                      show: true,
    	                      position: 'middle',
    	                      formatter: '平均{c}' + warn_line_measure,
    	                    },
    	                },
    	                data : [
    	                	{
    							silent:false,//鼠标悬停事件  true没有，false有
    							lineStyle:{//警戒线的样式  ，虚实  颜色
                                    type:"solid",
    								color:"#FA3934",
    							},
    						yAxis: warn_line_data  // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
    						}
    	                ]
    	            }
    	        }
    	    ]
    	};

    	if (option && typeof option === "object") {
    	    myChart.setOption(option, true);
    	}
    	// Enable data zoom when user click bar.
    	var zoomSize = 6;
    	myChart.on('click', function (params) {
    	    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
    	    myChart.dispatchAction({
    	        type: 'dataZoom',
    	        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
    	        endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
    	    });
    	});
    }

    
</script>


</html>



